<template>
	<view class="temp">
		<u-navbar title="" bgColor='transparent' :autoBack='true' :placeholder="true">
		</u-navbar>
		<view class="price">
			<view class="number">
				<text>￥</text>
				<text>1200.00</text>
			</view>
			<text class="type">支付宝提现</text>
		</view>
		<view class="record">
			<text class="status">当前状态</text>
			<view class="stepsCon">
				<view class="stepsItem" v-for="(item,index) in stepsData" :key="index">
					<view class="slider">
						<view class="rand" :class="index!=0?'rand2':''">
						</view>
						<view class="line" v-if="index!=stepsData.length-1">
						</view>
					</view>
					<view class="itemDiv">
						<text :class="index!=0?'greyP':''">{{item.lable}}</text>
						<text class="time" :class="index!=0?'greyP':''" v-if="item.time">{{item.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="inDiv">
				<text>提现金额</text>
				<text>￥1200.00</text>
			</view>
			<view class="inDiv">
				<text>服务费</text>
				<text>￥1.20</text>
			</view>
			<view class="inDiv">
				<text>申请时间</text>
				<text>2025年8月16日 10:41:24</text>
			</view>
			<view class="inDiv">
				<text>到账时间</text>
				<text>2025年8月16日 10:44:24</text>
			</view>
			<view class="inDiv">
				<text>提现账户</text>
				<text>100000000101202310411001887961403</text>
			</view>
			<view class="inDiv">
				<text>提现单号</text>
				<text>100000000101202310411001887961403</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepsData: [{
						lable: "到账",
						time: "2025-03-06 09:45:26"
					},
					{
						lable: "处理中",
					},
					{
						lable: "发起提现",
						time: "2025-03-06 09:45:26"
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.greyP {
		color: rgba(152, 160, 166, 1);
	}

	.temp {
		background-color: #fff;
		padding-bottom: 48rpx;
		
		.price {
			text-align: center;
			margin-top: 10rpx;

			.number {
				text:nth-child(1) {
					font-size: 28rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 63.64rpx;
					color: rgba(54, 68, 79, 1);
				}

				text:nth-child(2) {
					font-size: 48rpx;
					font-weight: 600;
					letter-spacing: 0rpx;
					line-height: 63.64rpx;
					color: rgba(54, 68, 79, 1);
				}
			}

			.type {
				margin: 24rpx 0 32rpx 0;
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 37.12rpx;
				color: rgba(54, 68, 79, 1);
			}
		}

		.record {
			display: flex;
			margin: 32rpx 32rpx 0 32rpx;
			padding: 32rpx 0;
			border-top: 2rpx solid #EAEAEA;
			border-bottom: 2rpx solid #EAEAEA;

			.status {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0rpx;
				line-height: 40.54rpx;
				color: rgba(152, 160, 166, 1);
			}

			.stepsCon {
				margin-left: 80rpx;

				.stepsItem {
					position: relative;
					display: flex;
					height: 108rpx;

					.slider {
						position: relative;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						margin-right: 24rpx;
						top: 8rpx;

						.rand {
							position: absolute;
							border-radius: 50%;
							top: 0;
							width: 16rpx;
							height: 16rpx;
							background: rgba(68, 212, 168, 1);
						}

						.rand2 {
							background: rgba(152, 160, 166, 1);
						}

						.line {
							height: 100%;
							border: 2rpx solid rgba(229, 230, 235, 1);
						}
					}

					.itemDiv {
						display: flex;
						flex-direction: column;
						font-size: 28rpx;
						font-weight: 400;
						line-height: 40rpx;

						.time {
							font-size: 20rpx;
							font-weight: 400;
							line-height: 28rpx;
						}
					}
				}
			}
		}

		.info {
			margin: 32rpx 32rpx 0 32rpx;

			.inDiv {
				display: flex;
				align-items: center;
				height: 60rpx;

				text:nth-child(1) {
					width: 112rpx;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(152, 160, 166, 1);
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(54, 68, 79, 1);
					margin-left: 32rpx;
				}
			}
		}
	}
</style>